<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>

	<!-- Basic Page Needs
	================================================== -->
	<meta charset="utf-8">
    <title>BizCraft - Responsive Html5 Template</title>
    <meta name="description" content="">
	<meta name="author" content="">

	<!-- Mobile Specific Metas
	================================================== -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<!-- Favicons
	================================================== -->
	<link rel="icon" th:href="@{/project/img/favicon/favicon-32x32.png}" type="image/x-icon" />
	<link rel="apple-touch-icon-precomposed" sizes="144x144" th:href="@{/project/img/favicon/favicon-144x144.png}">
	<link rel="apple-touch-icon-precomposed" sizes="72x72" th:href="@{/project/img/favicon/favicon-72x72.png}">
	<link rel="apple-touch-icon-precomposed" th:href="@{/project/img/favicon/favicon-54x54.png}">


</head>

<body>
<div th:replace="/project/layout/css :: css"></div>
	<div class="body-inner">
	<!-- Header start -->
		<header id="header" class="navbar-fixed-top header" role="banner" th:replace="/project/layout/header :: header"></header>

	<div id="banner-area">
		<img th:src="@{/project/images/banner/banner2.jpg}" alt ="" />
		<div class="parallax-overlay"></div>
			<!-- Subpage title start -->
			<div class="banner-title-content">
	        	<div class="text-center">
		        	<h2>Pricing</h2>
		        	<ul class="breadcrumb">
			            <li>Home</li>
			            <li>Pages</li>
			            <li><a href="#"> Pricing</a></li>
		          	</ul>
	          	</div>
          	</div><!-- Subpage title end -->
	</div><!-- Banner area end -->

	<!-- Main container start -->

	<section id="main-container">
		<div class="container">

			<!-- Pricing table start -->
			<div class="row">
				<div class="col-md-12 heading">
					<span class="title-icon classic pull-left"><i class="fa fa-university"></i></span>
					<h2 class="title classic">Pricing Table 4 Col</h2>
				</div>
			</div><!-- Title row end -->


	  		<div class="row">
				<!-- plan start -->
				<div class="col-md-3 col-sm-6 wow fadeInUp" data-wow-delay=".5s">
				    <div class="plan text-center">
				        <span class="plan-name">Basic <small>Monthly plan</small></span>
				        <p class="plan-price"><sup class="currency">$</sup><strong>49</strong><sub>.99</sub></p>
				        <ul class="list-unstyled">
				            <li>100GB Monthly Bandwidth</li>
				            <li>$100 Google AdWords</li>
				            <li>100 Domain Hosting</li>
				            <li>SSL Shopping Cart</li>
				            <li>24/7 Live Support</li>
				        </ul>
				        <a class="btn btn-primary" href="#.">Sign Up</a>
				    </div>
				</div><!-- plan end -->

				<!-- plan start -->
				<div class="col-md-3 col-sm-6 wow fadeInUp" data-wow-delay="1s">
				    <div class="plan text-center">
				        <span class="plan-name">Standared <small>Monthly plan</small></span>
				        <p class="plan-price"><sup class="currency">$</sup><strong>99</strong><sub>.99</sub></p>
				        <ul class="list-unstyled">
				            <li>100GB Monthly Bandwidth</li>
				            <li>$100 Google AdWords</li>
				            <li>100 Domain Hosting</li>
				            <li>SSL Shopping Cart</li>
				            <li>24/7 Live Support</li>
				        </ul>
				        <a class="btn btn-primary" href="#.">Sign Up</a>
				    </div>
				</div><!-- plan end -->

				<!-- plan start -->
				<div class="col-md-3 col-sm-6 wow fadeInUp" data-wow-delay="1.4s">
				    <div class="plan text-center featured">
				        <span class="plan-name">Professional <small>Monthly plan</small></span>
				        <p class="plan-price"><sup class="currency">$</sup><strong>149</strong><sub>.99</sub></p>
				        <ul class="list-unstyled">
				            <li>100GB Monthly Bandwidth</li>
				            <li>$100 Google AdWords</li>
				            <li>100 Domain Hosting</li>
				            <li>SSL Shopping Cart</li>
				            <li>24/7 Live Support</li>
				        </ul>
				        <a class="btn btn-primary" href="#.">Sign Up</a>
				    </div>
				</div><!-- plan end -->

				<!-- plan start -->
				<div class="col-md-3 col-sm-6 wow fadeInUp" data-wow-delay="1.6s">
				    <div class="plan text-center">
				        <span class="plan-name">Premium <small>Monthly plan</small></span>
				        <p class="plan-price"><sup class="currency">$</sup><strong>399</strong><sub>.99</sub></p>
				        <ul class="list-unstyled">
				            <li>100GB Monthly Bandwidth</li>
				            <li>$100 Google AdWords</li>
				            <li>100 Domain Hosting</li>
				            <li>SSL Shopping Cart</li>
				            <li>24/7 Live Support</li>
				        </ul>
				        <a class="btn btn-primary" href="#.">Sign Up</a>
				    </div>
				</div><!-- plan end -->
			</div><!--/ Content row end -->

			<div class="gap-60"></div>
			<div class="gap-40"></div>


			<!-- Pricing table start -->
			<div class="row">
				<div class="col-md-12 heading">
					<span class="title-icon classic pull-left"><i class="fa fa-university"></i></span>
					<h2 class="title classic">Pricing Table 3 Col</h2>
				</div>
			</div><!-- Title row end -->


	  		<div class="row">
				<!-- plan start -->
				<div class="col-md-4 col-sm-6 wow fadeInUp" data-wow-delay=".5s">
				    <div class="plan text-center">
				        <span class="plan-name">Basic <small>Monthly plan</small></span>
				        <p class="plan-price"><sup class="currency">$</sup><strong>49</strong><sub>.99</sub></p>
				        <ul class="list-unstyled">
				            <li>100GB Monthly Bandwidth</li>
				            <li>$100 Google AdWords</li>
				            <li>100 Domain Hosting</li>
				            <li>SSL Shopping Cart</li>
				            <li>24/7 Live Support</li>
				        </ul>
				        <a class="btn btn-primary" href="#.">Sign Up</a>
				    </div>
				</div><!-- plan end -->

				<!-- plan start -->
				<div class="col-md-4 col-sm-6 wow fadeInUp" data-wow-delay="1s">
				    <div class="plan text-center">
				        <span class="plan-name">Standared <small>Monthly plan</small></span>
				        <p class="plan-price"><sup class="currency">$</sup><strong>99</strong><sub>.99</sub></p>
				        <ul class="list-unstyled">
				            <li>100GB Monthly Bandwidth</li>
				            <li>$100 Google AdWords</li>
				            <li>100 Domain Hosting</li>
				            <li>SSL Shopping Cart</li>
				            <li>24/7 Live Support</li>
				        </ul>
				        <a class="btn btn-primary" href="#.">Sign Up</a>
				    </div>
				</div><!-- plan end -->

				<!-- plan start -->
				<div class="col-md-4 col-sm-6 wow fadeInUp" data-wow-delay="1.4s">
				    <div class="plan text-center featured">
				        <span class="plan-name">Professional <small>Monthly plan</small></span>
				        <p class="plan-price"><sup class="currency">$</sup><strong>149</strong><sub>.99</sub></p>
				        <ul class="list-unstyled">
				            <li>100GB Monthly Bandwidth</li>
				            <li>$100 Google AdWords</li>
				            <li>100 Domain Hosting</li>
				            <li>SSL Shopping Cart</li>
				            <li>24/7 Live Support</li>
				        </ul>
				        <a class="btn btn-primary" href="#.">Sign Up</a>
				    </div>
				</div><!-- plan end -->


			</div><!--/ Content row end -->

		</div><!-- container end -->
	</section><!--/ Main container end -->

	<section class="call-to-action">
		<div class="container">
			<div class="row">
				<div class="col-sm-12">
					<h3>Join with BizCraft and Give Your Website a Brand New Look</h3>
					<a href="#" class="pull-right btn btn-primary white">Purchase Now</a>
				</div>
			</div>
		</div>
	</section>

		<footer id="footer" class="footer" th:replace="/project/layout/footer :: footer"></footer>


		<section id="copyright" class="copyright angle" th:replace="/project/layout/footer :: copyright"></section>

		<div th:replace="/project/layout/js :: js"></div>
	</div><!-- Body inner end -->
</body>
</html>
